<template>
  <div>
    <el-input
      v-model="roleData.roleName"
      placeholder="请输入角色名称"
      size="normal"
      clearable
    ></el-input>
    <el-tree
      :data="treeData"
      :props="{ label: (data) => data.meta.label }"
      node-key="path"
      show-checkbox
      @check="handleCheck"
    ></el-tree>

    <el-button type="primary" size="default" @click="handleRoleAdd">
      录入角色
    </el-button>
  </div>
</template>

<script>
import { routes } from "@/router";
import { rolePost } from "@/api/user";
export default {
  data() {
    return {
      treeData: routes[0].children,
      roleData: {
        roleName: "",
        checkedKeys: [],
        halfCheckedKeys: [],
      },
    };
  },
  methods: {
    handleLable(data, obj) {
      console.log(data.obj);
    },
    //用户勾选tree的时候，得到勾选的path
    handleCheck(_, { checkedKeys, halfCheckedKeys }) {
      this.roleData.checkedKeys = checkedKeys;
      this.roleData.halfCheckedKeys = halfCheckedKeys;
    },
    handleRoleAdd() {
      rolePost(this.roleData);
    },
  },
};
</script>

<style lang="scss" scoped></style>
